<template>
  <div class="main">
    <div class="leftBox">
      <el-card shadow="never">
        <div class="cardBox">
          <div class="content">
            <div class="headerBox">商品信息完善度</div>
            <div class="headerBox">完善商品信息，提升权重</div>
            <div class="numBox">
              <div class="num">{{ num }}</div>
              条信息欠缺
            </div>
          </div>
        </div>
        <div
          class="listBox"
          v-for="(item, index) in listBox"
          :key="index"
          @click="AnchorPoint(index, item.val)"
        >
          <div class="nameBox" :class="index == listIndex ? 'newName' : ''">
            {{ item.name }}
          </div>
          <div
            class="yuandian"
            :class="index == listIndex ? 'newYuan' : ''"
          ></div>
        </div>
      </el-card>
    </div>
    <div class="rightBox" id="main">
      <el-card shadow="never">
        <div class="newTitelbnOX">
          已选类目 ：
          <div class="typeBox">{{ $route.query.SelectList }}</div>
          <el-button type="text" @click="editType">修改类目</el-button>
        </div>
      </el-card>
      <div class="middle link_title" id="jc">
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleFormS"
          label-width="auto"
          class="demo-ruleForm"
        >
          <div class="jichu">
            <div class="title">基础信息</div>
            <div class="top">
              <div class="left">
                <el-form-item label="货号/款号" prop="productCode">
                  <el-input
                    @blur="jy"
                    v-model="form.productCode"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
                <el-form-item label="商品标题" prop="goodsName">
                  <el-input
                    @blur="jy"
                    v-model="form.goodsName"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
                <el-form-item label="童装频道" prop="channelId">
                  <el-select
                    v-model="form.channelId"
                    placeholder="请选择"
                    @change="jy"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="mainbox">
              <span class="box3"
                >建议主图像素
                800*800，主图直接影响商品在商城的曝光引流效果，低质图无法获得平台免费推荐机会，仅支持png，jpg，jpeg格式，宽高比例为1:1（至少600*600px），大小3M内</span
              >
              <div class="box1">
                <span style="color: #e22a1f"> *</span>
                上传图片包 请上传400M内的zip压缩包

                <el-upload
                  v-loading="loading"
                  element-loading-text="上传中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0)"
                  ref="uploadRef"
                  :headers="{ accessToken: token }"
                  class="avatar-uploader"
                  :action="action + '/common/upload/fileUploadProduct'"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  :on-exceed="onExceed"
                  :show-file-list="false"
                  :before-remove="beforeRemove"
                  :data="{ uuid: uuid }"
                >
                  <el-button type="text" v-if="picturePackName">
                    {{ picturePackName }}</el-button
                  >
                  <div class="upload" v-else>上传图片包</div>
                </el-upload>
              </div>
              <div class="box1">类目属性</div>
              <div class="top">
                <div class="left">
                  <el-form-item
                    v-for="(item, index) in form.typeList"
                    :key="index"
                    :label="item.name"
                    :prop="'typeList.' + index + '.value'"
                    :rules="{
                      required: item.flag,
                      message: `${item.name}不能为空`,
                      trigger: 'change',
                    }"
                  >
                    <el-select
                      v-model="item.value"
                      placeholder="请选择"
                      collapse-tags
                      :multiple="item.chooseMaxNum == 1 ? false : true"
                    >
                      <el-option
                        v-for="item1 in item.inputList"
                        :key="item1"
                        :label="item1"
                        :value="item1"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <div class="middle link_title" id="jg">
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleForm"
          label-width="auto"
          class="demo-ruleForm"
        >
          <div class="jichu">
            <div class="title">规格价格</div>
            <div class="mainbox">
              <span class="box3"
                >选择颜色
                <span class="lanBox" @click="dialogVisible = true"
                  >点击选择</span
                ></span
              >
              <div class="colorBox">
                <div
                  class="listBox"
                  v-for="(item, index) in selColor"
                  :key="item.uid"
                >
                  <el-input
                    style="width: 50%"
                    v-model="item.label"
                    placeholder="请输入"
                  ></el-input>
                  <div @click="colorIndex = index">
                    <el-upload
                      :action="action + '/common/upload/fileUploadProduct'"
                      class="upload-demo"
                      :on-success="handleAvatarSuccessB"
                      :before-upload="beforeAvatarUploadB"
                      :show-file-list="false"
                      :data="{ uuid: uuid }"
                    >
                      <!-- <i class="el-icon-plus"></i> -->
                      <div class="upBtn">上传图片</div>
                    </el-upload>
                  </div>

                  <el-image
                    v-if="item.url"
                    style="width: 0.35rem; height: 0.35rem; margin: 0 0.1rem"
                    :src="item.url"
                    :preview-src-list="srcList"
                  >
                  </el-image>
                  <!-- <div class="upBtn" @click="selZipImg(index)">
                    选择图片包图片
                  </div> -->
                  <i @click="del(index)" class="el-icon-close"></i>
                </div>
              </div>
              <div class="top">
                <div class="left">
                  <el-form-item label="选择尺码范围" prop="goodsName">
                    <el-select
                      v-model="form.sizeFrop"
                      placeholder="请选择"
                      @change="pmsSelectAllByType"
                    >
                      <el-option
                        v-for="(item, index) in SizeGroupList"
                        :key="index"
                        :label="item.value"
                        :value="item.name"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label=" " label-width="0px">
                    <div class="btnBox" @click="dialogVisibleC = true">
                      新增尺码
                    </div>
                  </el-form-item>
                </div>
              </div>
              <el-table
                v-if="tableData.length"
                :data="tableData"
                style="width: 833px; margin: 0.1rem 0"
              >
                <el-table-column prop="Size" label="尺码">
                  <template slot-scope="scope">
                    <el-input
                      v-if="scope.row.add"
                      v-model="scope.row.Size"
                      @blur="editCmData"
                    >
                    </el-input>
                    <div v-else>{{ scope.row.Size }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="身高">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.Height" @blur="editCmData">
                      <i
                        slot="suffix"
                        style="font-style: normal; margin-right: 10px"
                        >CM</i
                      >
                    </el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="address" label="体重">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.Weight" @blur="editCmData">
                      <i
                        slot="suffix"
                        style="font-style: normal; margin-right: 10px"
                        >KG</i
                      >
                    </el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="address" label="年龄">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.Age" @blur="editCmData">
                    </el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="address" label=" ">
                  <template slot-scope="scope">
                    <i
                      class="el-icon-delete"
                      style="
                        color: #e22a1f;
                        font-size: 0.2rem;
                        cursor: pointer;
                        margin-left: 0.2rem;
                      "
                      @click="delSize(scope.$index)"
                    ></i>
                  </template>
                </el-table-column>
              </el-table>
              <div class="title">
                库存信息
                <span class="redBox">请先选择颜色和尺码</span>
              </div>
              <div class="top">
                <div class="left">
                  <el-form-item
                    label="颜色"
                    label-width="56px"
                    prop="goodsName"
                  >
                    <el-select
                      clearable
                      v-model="selColorValue"
                      placeholder="请选择"
                    >
                      <el-option
                        :label="item.label"
                        v-for="(item, index) in newSelColor"
                        :key="index"
                        :value="item.label"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="尺码"
                    label-width="56px"
                    prop="goodsName"
                  >
                    <el-select
                      clearable
                      v-model="selZiseValue"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="(item, index) in newTabData"
                        :key="index"
                        :label="item.Size"
                        :value="item.Size"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <!-- <el-form-item
                    label="产地"
                    label-width="56px"
                    prop="goodsName"
                  >
                    <el-select
                      v-model="form.applicableGender"
                      placeholder="请选择"
                    >
                      <el-option label="男" value="0"></el-option>
                      <el-option label="女" value="1"></el-option>
                    </el-select>
                  </el-form-item> -->
                </div>
              </div>

              <el-table
                v-if="tableDataB.length"
                :data="tableDataB"
                :span-method="objectSpanMethod"
                border
                style="width: 100%; margin-top: 20px"
              >
                <el-table-column prop="colorName" label="颜色分类">
                </el-table-column>
                <el-table-column prop="Size" label="尺码"> </el-table-column>
                <el-table-column prop="Height" label="身高"> </el-table-column>
                <el-table-column prop="Weight" label="体重"> </el-table-column>
                <el-table-column prop="amount3" label="价格">
                  <template slot="header" slot-scope="scope">
                    价格
                    <el-input
                      style="width: 50%"
                      v-model="priceValue"
                      size="mini"
                      placeholder="价格"
                      @blur="priceBlur"
                      oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"
                    />
                  </template>
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.price"
                      oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"
                    >
                      <i
                        slot="suffix"
                        style="font-style: normal; margin-right: 10px"
                        >￥</i
                      >
                    </el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="colorName" label="现有库存">
                  <template slot="header" slot-scope="scope">
                    库存
                    <el-input
                      style="width: 50%"
                      v-model="kcValue"
                      size="mini"
                      placeholder="库存"
                      @blur="priceBlurB"
                      @input="kcValue = kcValue.replace(/^(0+)|[^\d]+/g, '')"
                    />
                  </template>
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.kc"
                      @input="
                        scope.row.kc = scope.row.kc.replace(/^(0+)|[^\d]+/g, '')
                      "
                    >
                      <i
                        slot="suffix"
                        style="font-style: normal; margin-right: 10px"
                        >件</i
                      >
                    </el-input>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-form>
      </div>
      <div class="middle link_title" id="tp">
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleForm"
          label-width="auto"
          class="demo-ruleForm"
        >
          <div class="jichu">
            <div class="title">
              图片信息
              <span class="redBox"
                >商品如有绳带必须符合法规要求，或于详情做绳带说明，违规下架！</span
              >
            </div>
            <div class="mainbox">
              <div class="upImgBox">
                <div class="leftImg" style="width: 4.56rem">
                  <el-upload
                    class="avatar-uploaderS"
                    :action="action + '/common/upload/fileUploadProduct'"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccessC"
                    :before-upload="beforeAvatarUploadC"
                    :on-change="changeFileB"
                    :auto-upload="false"
                    :data="{ uuid: uuid }"
                    multiple
                    ref="uploadImg"
                  >
                    <div class="uploadBoxS">
                      图片选择器
                      <el-button style="margin-left: 0.1rem" type="text">
                        <i class="el-icon-upload avatar-uploader-icon"></i>
                        上传图片</el-button
                      >
                    </div>
                  </el-upload>
                  <div class="bigImgBoxs">
                    <div
                      style="
                        width: 1rem;
                        height: 1rem;
                        position: relative;
                        margin-right: 0.1rem;
                        margin-bottom: 0.1rem;
                      "
                      v-for="(item, index) in bigImgList"
                      :key="index"
                    >
                      <img
                        @click="getNewImg(item, index)"
                        :src="item.url"
                        class="bigImgBox"
                        alt=""
                        style="cursor: pointer"
                      />
                      <!-- <i
                        @click="bigImgDel(index)"
                        v-if="BifImgIndex == index"
                        style="
                          position: absolute;
                          top: 0.04rem;
                          right: 0.01rem;
                          font-size: 0.2rem;
                          color: #e22a1f;
                          cursor: pointer;
                        "
                        class="el-icon-circle-close"
                      ></i> -->
                      <i
                        class="el-icon-success"
                        @click="getNewImg(item, index)"
                        v-if="item.check"
                        style="
                          position: absolute;
                          top: 0.5rem;
                          right: 0.25rem;
                          font-size: 0.32rem;
                          color: #e22a1f;
                          cursor: pointer;
                        "
                      ></i>
                    </div>
                  </div>
                </div>
                <div class="rightImg">
                  <div class="textBox">
                    仅支持png，jpg，jpeg格式，宽高至少600*600px，大小5M内。建议尺寸800*800px，第6张必须上传白底图
                  </div>
                  <div class="imgLists">
                    <div
                      class="imgBox"
                      @mouseenter="BifImgIndex = 0"
                      @mouseleave="BifImgIndex = null"
                    >
                      <i
                        @click="bigImgDel(0, ztImgList[0])"
                        v-if="BifImgIndex == 0 && ztImgList[0]"
                        style="
                          position: absolute;
                          top: 0.04rem;
                          right: 0.01rem;
                          font-size: 0.2rem;
                          color: #e22a1f;
                          cursor: pointer;
                          z-index: 99;
                        "
                        class="el-icon-circle-close"
                      ></i>
                      <el-upload
                        class="avatar-uploader"
                        :action="action + '/common/upload/fileUploadProduct'"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccessD"
                        :before-upload="beforeAvatarUploadC"
                        :data="{ uuid: uuid }"
                      >
                        <img
                          style="width: 1rem; height: 1rem"
                          v-if="ztImgList[0]"
                          :src="ztImgList[0]"
                          class="avatar"
                        />
                        <div class="uploadBox" v-else>
                          <i class="el-icon-plus avatar-uploader-icon"></i>
                          添加图片
                        </div>
                      </el-upload>
                    </div>
                    <div
                      class="imgBox"
                      @mouseenter="BifImgIndex = 1"
                      @mouseleave="BifImgIndex = null"
                    >
                      <i
                        @click="bigImgDel(1, ztImgList[1])"
                        v-if="BifImgIndex == 1 && ztImgList[1]"
                        style="
                          position: absolute;
                          top: 0.04rem;
                          right: 0.01rem;
                          font-size: 0.2rem;
                          color: #e22a1f;
                          cursor: pointer;
                          z-index: 99;
                        "
                        class="el-icon-circle-close"
                      ></i>
                      <el-upload
                        class="avatar-uploader"
                        :action="action + '/common/upload/fileUploadProduct'"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccessD2"
                        :before-upload="beforeAvatarUploadC"
                        :data="{ uuid: uuid }"
                      >
                        <img
                          style="width: 1rem; height: 1rem"
                          v-if="ztImgList[1]"
                          :src="ztImgList[1]"
                          class="avatar"
                        />
                        <div class="uploadBox" v-else>
                          <i class="el-icon-plus avatar-uploader-icon"></i>
                          添加图片
                        </div>
                      </el-upload>
                    </div>
                    <div
                      class="imgBox"
                      @click="ztImgIndex = 2"
                      @mouseenter="BifImgIndex = 2"
                      @mouseleave="BifImgIndex = null"
                    >
                      <i
                        @click="bigImgDel(2, ztImgList[2])"
                        v-if="BifImgIndex == 2 && ztImgList[2]"
                        style="
                          position: absolute;
                          top: 0.04rem;
                          right: 0.01rem;
                          font-size: 0.2rem;
                          color: #e22a1f;
                          cursor: pointer;
                          z-index: 99;
                        "
                        class="el-icon-circle-close"
                      ></i>
                      <el-upload
                        class="avatar-uploader"
                        :action="action + '/common/upload/fileUploadProduct'"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccessD3"
                        :before-upload="beforeAvatarUploadC"
                        :data="{ uuid: uuid }"
                      >
                        <img
                          style="width: 1rem; height: 1rem"
                          v-if="ztImgList[2]"
                          :src="ztImgList[2]"
                          class="avatar"
                        />
                        <div class="uploadBox" v-else>
                          <i class="el-icon-plus avatar-uploader-icon"></i>
                          添加图片
                        </div>
                      </el-upload>
                    </div>
                    <div
                      class="imgBox"
                      @mouseenter="BifImgIndex = 3"
                      @mouseleave="BifImgIndex = null"
                    >
                      <i
                        @click="bigImgDel(3, ztImgList[3])"
                        v-if="BifImgIndex == 3 && ztImgList[3]"
                        style="
                          position: absolute;
                          top: 0.04rem;
                          right: 0.01rem;
                          font-size: 0.2rem;
                          color: #e22a1f;
                          cursor: pointer;
                          z-index: 99;
                        "
                        class="el-icon-circle-close"
                      ></i>
                      <el-upload
                        class="avatar-uploader"
                        :action="action + '/common/upload/fileUploadProduct'"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccessD4"
                        :before-upload="beforeAvatarUploadC"
                        :data="{ uuid: uuid }"
                      >
                        <img
                          style="width: 1rem; height: 1rem"
                          v-if="ztImgList[3]"
                          :src="ztImgList[3]"
                          class="avatar"
                        />
                        <div class="uploadBox" v-else>
                          <i class="el-icon-plus avatar-uploader-icon"></i>
                          添加图片
                        </div>
                      </el-upload>
                    </div>
                    <div
                      class="imgBox"
                      @mouseenter="BifImgIndex = 4"
                      @mouseleave="BifImgIndex = null"
                    >
                      <i
                        @click="bigImgDel(4, ztImgList[4])"
                        v-if="BifImgIndex == 4 && ztImgList[4]"
                        style="
                          position: absolute;
                          top: 0.04rem;
                          right: 0.01rem;
                          font-size: 0.2rem;
                          color: #e22a1f;
                          cursor: pointer;
                          z-index: 99;
                        "
                        class="el-icon-circle-close"
                      ></i>
                      <el-upload
                        class="avatar-uploader"
                        :action="action + '/common/upload/fileUploadProduct'"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccessD5"
                        :before-upload="beforeAvatarUploadC"
                        :data="{ uuid: uuid }"
                      >
                        <img
                          style="width: 1rem; height: 1rem"
                          v-if="ztImgList[4]"
                          :src="ztImgList[4]"
                          class="avatar"
                        />
                        <div class="uploadBox" v-else>
                          <i class="el-icon-plus avatar-uploader-icon"></i>
                          添加图片
                        </div>
                      </el-upload>
                    </div>
                    <div
                      class="imgBox"
                      @mouseenter="BifImgIndex = 5"
                      @mouseleave="BifImgIndex = null"
                    >
                      <i
                        @click="bigImgDel(5, ztImgList[5])"
                        v-if="BifImgIndex == 5 && ztImgList[5]"
                        style="
                          position: absolute;
                          top: 0.04rem;
                          right: 0.01rem;
                          font-size: 0.2rem;
                          color: #e22a1f;
                          cursor: pointer;
                          z-index: 99;
                        "
                        class="el-icon-circle-close"
                      ></i>
                      <el-upload
                        class="avatar-uploader"
                        :action="action + '/common/upload/fileUploadProduct'"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccessD6"
                        :before-upload="beforeAvatarUploadC"
                        :data="{ uuid: uuid }"
                      >
                        <img
                          style="width: 1rem; height: 1rem"
                          v-if="ztImgList[5]"
                          :src="ztImgList[5]"
                          class="avatar"
                        />
                        <div class="uploadBox" v-else>
                          <i class="el-icon-plus avatar-uploader-icon"></i>
                          添加图片
                        </div>
                      </el-upload>
                      <div class="baidi">白底图片</div>
                    </div>
                  </div>
                  <div class="textBox">
                    长图比例为3:4（建议尺寸750*1000），大小3M以内
                  </div>
                  <div class="imgLists">
                    <div class="imgBox">
                      <el-upload
                        class="avatar-uploader"
                        :action="action + '/common/upload/fileUploadProduct'"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccessE"
                        :before-upload="beforeAvatarUploadS"
                        :data="{ uuid: uuid }"
                      >
                        <img
                          style="width: 1rem; height: 1rem"
                          v-if="ctImg"
                          :src="ctImg"
                          class="avatar"
                        />
                        <div class="uploadBox" v-else>
                          <i class="el-icon-plus avatar-uploader-icon"></i>
                          添加长图
                        </div>
                      </el-upload>
                    </div>
                  </div>
                </div>
              </div>
              <div class="newTitle">商品详情</div>
              <div class="newContent">
                <div class="xqLeftBox">
                  <div class="headerBox">页面预览</div>
                  <div class="leftContent">
                    <img
                      class="xqImgClass"
                      :src="item"
                      v-for="(item, index) in xqImgList"
                      :key="index"
                      alt=""
                    />
                  </div>
                </div>
                <div class="xqRightBox">
                  <div class="headerBox">
                    详情编辑
                    <span class="huitext"
                      >已上传<span class="redTetx">{{ xqImgList.length }}</span
                      >/50张，拖拽可调整顺序，单张详情图宽高比不超5000*20000px，大小5M内，仅支持jpg/jpeg/png格式</span
                    >
                  </div>
                  <div class="leftContent" style="height: auto">
                    <el-upload
                      v-if="sfsctpB"
                      multiple
                      :show-file-list="false"
                      class="upload-demo"
                      :action="action + '/common/upload/fileUploadProduct'"
                      :on-success="handleAvatarSuccessF"
                      :before-upload="beforeAvatarUploadB"
                      :data="{ uuid: uuid }"
                      :auto-upload="false"
                      :on-change="changeFile"
                      ref="upload1"
                    >
                      <div class="btnBox">上传图片</div>
                    </el-upload>
                    <div class="btnBox" v-else @click="getImgXq">上传图片</div>
                  </div>
                  <div
                    class="imgLists"
                    style="
                      margin-left: 0.1rem;
                      display: flex;
                      flex-wrap: wrap;
                      height: 3.2rem;
                      overflow-y: auto;
                    "
                  >
                    <div
                      @mouseenter="xqImgIndex = index"
                      @mouseleave="xqImgIndex = null"
                      class="imgBox"
                      style="
                        width: 1rem;
                        height: 1rem;
                        position: relative;
                        margin-right: 0.1rem;
                        margin-bottom: 0.1rem;
                      "
                      v-for="(item, index) in xqImgList"
                      :key="index"
                    >
                      <img
                        @dragover="onDragOver"
                        @dragend="onDragEnd(index)"
                        style="width: 1rem; height: 1rem"
                        :src="item"
                        class="avatar"
                      />
                      <i
                        @click="xqImgDel(index)"
                        v-if="xqImgIndex == index"
                        style="
                          position: absolute;
                          top: 0.02rem;
                          right: 0.02rem;
                          font-size: 0.2rem;
                          color: #e22a1f;
                          cursor: pointer;
                        "
                        class="el-icon-circle-close"
                      ></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <div class="middle link_title" id="sp">
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleForm"
          label-width="auto"
          class="demo-ruleForm"
        >
          <div class="jichu">
            <div class="title">主图视频</div>
            <div class="newTitle">
              仅支持mp4格式上传，大小100M内，宽高比1:1或3:4尺寸视频（像素建议不低于600px）时长60s，建议30秒内短视频最佳（可优先在商品等推荐频道展现）
            </div>
            <div class="newTitle">
              主图视频：使用1:1或16:9视频，时长小于等于60s；建议上传30s以内短视频，且突出1-2个核心卖点。
            </div>
            <div class="mainbox">
              <div class="upImgBox">
                <div
                  class="leftImg"
                  @mouseenter="mp4Show = true"
                  @mouseleave="mp4Show = false"
                  v-loading="loadingB"
                  element-loading-text="上传中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.1)"
                >
                  <videos
                    style="width: 2.61rem; height: 2.61rem"
                    :url="mp4One"
                    v-if="mp4One"
                  ></videos>
                  <el-upload
                    v-else
                    class="avatar-uploader"
                    :action="action + '/common/upload/fileUploadProduct'"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccessMp4"
                    :before-upload="beforeAvatarUploadMp4"
                    :data="{ uuid: uuid }"
                  >
                    <div class="uploadBox">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      添加视频
                    </div>
                  </el-upload>
                  <div class="botBox">商品描述视频</div>
                  <i
                    @click="Mp4Del()"
                    v-if="mp4Show && mp4One"
                    style="
                      position: absolute;
                      top: 0.02rem;
                      right: 0.02rem;
                      font-size: 0.2rem;
                      color: #e22a1f;
                      cursor: pointer;
                      z-index: 999;
                    "
                    class="el-icon-circle-close"
                  ></i>
                </div>
                <div
                  class="leftImg"
                  style="margin-left: 0.2rem"
                  v-loading="loadingC"
                  element-loading-text="上传中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.1)"
                  @mouseenter="mp4ShowB = true"
                  @mouseleave="mp4ShowB = false"
                >
                  <videos
                    style="width: 2.61rem; height: 2.61rem"
                    :url="mp4Tow"
                    v-if="mp4Tow"
                  ></videos>
                  <el-upload
                    v-else
                    class="avatar-uploader"
                    :action="action + '/common/upload/fileUploadProduct'"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccessMp4B"
                    :before-upload="beforeAvatarUploadMp4B"
                    :data="{ uuid: uuid }"
                  >
                    <div class="uploadBox">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      添加视频
                    </div>
                  </el-upload>
                  <i
                    @click="Mp4DelB()"
                    v-if="mp4ShowB && mp4Tow"
                    style="
                      position: absolute;
                      top: 0.02rem;
                      right: 0.02rem;
                      font-size: 0.2rem;
                      color: #e22a1f;
                      cursor: pointer;
                      z-index: 999;
                    "
                    class="el-icon-circle-close"
                  ></i>
                  <div class="botBox">商品讲解视频</div>
                </div>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <div class="bottom link_title" id="fw">
        服务承诺
        <div class="textBox">
          原图保障
          <span class="huiText"
            >（请按实勾选，若被证实非原图或者盗图的，将做商品屏蔽，店铺降权处罚，影响曝光与分销量）</span
          >
        </div>
        <div style="margin-top: 0.22rem">
          <el-radio v-model="imageProtection" label="0">否</el-radio>
          <el-radio v-model="imageProtection" label="1">是</el-radio>
        </div>
        <div class="textBox">
          补货时间
          <span class="huiText"
            >（补货时间越短越能获得卖家青睐，但务必及时补货，超时投诉将做商品降权处罚！）</span
          >
        </div>
        <div style="margin-top: 0.22rem">
          <el-radio v-model="replenishmentTime" label="0">不确定</el-radio>
          <el-radio v-model="replenishmentTime" label="1">1天</el-radio>
          <el-radio v-model="replenishmentTime" label="2">2天</el-radio>
          <el-radio v-model="replenishmentTime" label="3">3天</el-radio>
          <el-radio v-model="replenishmentTime" label="4">4天</el-radio>
          <el-radio v-model="replenishmentTime" label="5">5天</el-radio>
        </div>
        <div class="textBox">
          买家秀
          <span class="huiText"
            >（支持买家秀即您可为卖家提供商品买家秀图片或者视频，帮助卖家做直播带货影响。）</span
          >
        </div>
        <div style="margin-top: 0.22rem">
          <el-radio v-model="buyersShow" label="1">支持</el-radio>
          <el-radio v-model="buyersShow" label="0">不支持</el-radio>
        </div>
        <div class="textBox">
          售后保障
          <span class="huiText"
            >（支持退换货能招募更多分销商，售后服务时间越长商品展示会加权）</span
          >
        </div>
        <div style="margin-top: 0.22rem">
          <el-checkbox v-model="returnGoods" @change="jy" disabled
            >支持15天退货</el-checkbox
          >
          <el-checkbox v-model="exchangeGoods" @change="jy" disabled
            >支持15天换货</el-checkbox
          >
        </div>
      </div>
    </div>
    <div class="buttombuttons">
      <div class="gray" @click="$router.push('/CommodityCategory')">关闭</div>
      <div class="red" @click="saveProduct">确认发布</div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="50%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">颜色选择</div>
        <div class="chahao" @click="dialogVisible = false">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="contentBox">
        <el-autocomplete
          :fetch-suggestions="querySearch"
          :trigger-on-focus="false"
          style="width: 50%"
          placeholder="试试搜：白色"
          prefix-icon="el-icon-search"
          @select="handleSelect"
          v-model="input2"
          @blur="selectColor"
          ref="auocleft"
        >
        </el-autocomplete>
        <div class="cascaderBox">
          <el-cascader-panel
            ref="cascaderRes"
            v-model="colorValue"
            :options="colorList"
            :props="{
              value: 'rgb',
              label: 'colorName',
              children: 'colors',
              multiple: true,
            }"
          ></el-cascader-panel>
        </div>
      </div>
      <div class="btnBox">
        <div class="gray" @click="dialogVisible = false">关闭</div>
        <div class="red" @click="getCascader">确认</div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleB" width="50%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">图片包</div>
        <div class="chahao" @click="dialogVisibleB = false">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="contentBox">
        <div class="imgContent">
          <div
            class="newImgBox"
            :class="index == zipIndex ? 'newImgBoxB' : ''"
            v-for="(item, index) in zipImgList"
            :key="index"
          >
            <el-image
              style="width: 1rem; height: 1rem"
              :src="item"
              :preview-src-list="zipImgList"
            >
            </el-image>
            <i
              @click="zipIndex = index"
              :class="index == zipIndex ? 'newICon' : ''"
              class="el-icon-circle-check"
            ></i>
          </div>
        </div>
      </div>
      <div class="btnBox">
        <div class="gray" @click="dialogVisibleB = false">关闭</div>
        <div class="red" @click="getZipImg">确认</div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleC" width="30%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">新增尺码</div>
        <div class="chahao" @click="dialogVisibleC = false">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="contentBox">
        <el-form :model="cmform" :rules="rules" ref="abc" label-width="auto">
          <el-form-item label="尺码" prop="Size">
            <el-input v-model="cmform.Size"> </el-input>
          </el-form-item>
          <el-form-item label="身高" prop="Height">
            <el-input v-model="cmform.Height">
              <i slot="suffix" style="font-style: normal; margin-right: 10px"
                >CM</i
              >
            </el-input>
          </el-form-item>
          <el-form-item label="体重" prop="Weight">
            <el-input v-model="cmform.Weight">
              <i slot="suffix" style="font-style: normal; margin-right: 10px"
                >KG</i
              ></el-input
            >
          </el-form-item>
          <el-form-item label="年龄" prop="Age">
            <el-input v-model="cmform.Age"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="btnBox">
        <div class="gray" @click="dialogVisibleC = false">关闭</div>
        <div class="red" @click="getSizeL">确认</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import _ from "lodash";
import { getToken } from "@/utils/auth";
import {
  pmsChannel,
  selectAllByCategory,
  selectColor,
  selectAllByType,
  pmsSelectAllByType,
  saveProduct,
  selectZipImages,
} from "@/api/seller/management";
import imgPath from "../../../utils/config";
import videos from "@/components/video";
import { v4 as uuidv4 } from "uuid";
import { getData } from "@/api/shopDetail";
import axios from "axios";
export default {
  components: { videos },
  data() {
    return {
      sfsctp: true,
      sfsctpB: true,
      BifImgIndex: null,
      uuid: null,
      loadingB: false,
      xqImgList: [],
      ztImgList: ["", "", "", "", "", ""],
      ctImg: "",
      ztImgIndex: null,
      search: "",
      num: 13,
      tableDataB: [],
      SizeGroupList: [],
      //尺码表格
      tableData: [],
      cmform: {},
      dialogVisibleC: false,
      zipIndex: null,
      zipImgList: [],
      srcList: [],
      loading: false,
      colorIndex: 0,
      selColor: [],
      dialogVisibleB: false,
      restaurants: [],
      input2: "",
      colorList: [],
      colorValue: [],
      dialogVisible: false,
      typeList: [],
      imgList: [],
      fileList: [],
      action: "",
      listIndex: 0,
      listBox: [
        {
          name: "基础属性",
        },
        {
          name: "规格价格",
        },
        {
          name: "图片信息",
        },

        {
          name: "主图视频",
        },
        {
          name: "服务承诺",
        },
      ],
      token: "",
      options: [
        {
          name: "童装频道1",
          id: 0,
        },
      ],
      imageUrl: "",
      form: {
        productCode: "",
        goodsName: "",
        channelId: "",
        typeList: [],
        picturePack: "",
      },
      rules: {
        goodsName: [
          { required: true, message: "请输入商品标题", trigger: "blur" },
        ],
        productCode: [
          { required: true, message: "请输入货号", trigger: "blur" },
        ],
        channelId: [
          { required: true, message: "请选择频道", trigger: "change" },
        ],
        brandId: [{ required: true, message: "请输入品牌", trigger: "blur" }],
        applicableGender: [
          { required: true, message: "请输入适用性别", trigger: "blur" },
        ],
        collar: [{ required: true, message: "请输入领型", trigger: "blur" }],
        quality: [{ required: true, message: "请输入材质", trigger: "blur" }],
        style: [{ required: true, message: "请输入款式", trigger: "blur" }],
        Size: [{ required: true, message: "请填写尺码", trigger: "blur" }],
        Height: [{ required: true, message: "请填写身高", trigger: "blur" }],
        Weight: [{ required: true, message: "请填写体重", trigger: "blur" }],
        Age: [{ required: true, message: "请填写年龄", trigger: "blur" }],
      },
      selColorValue: "全部",
      selZiseValue: "全部",
      priceValue: "",
      kcValue: "",
      xqImgIndex: null,
      targetSrc: "",
      mp4One: "",
      mp4Tow: "",
      mp4Show: false,
      mp4ShowB: false,
      returnGoods: true,
      exchangeGoods: true,
      loadingC: false,
      imageProtection: "0",
      replenishmentTime: "0",
      buyersShow: "1",
      bigImgList: [],
      picturePackName: "",
      newSelColor: [],
      newTabData: [],
      fileNum: "", // 单词递归上传的文件
      upFileList: "", //需要依次上传的待传列表
      percentTotal: 0, //总上传个数
      percentNow: 0, //当前上传个数
      showDesc: "", //结束文案
      showPercent: false, //显示上传进度条
      time: null, // change事件是否结束 是否可以直接调手动上传事件（目前设置1.5s）
      disabledUpload: false, //正在上传中 禁止再次选择文件上传

      fileData: {}, //上传参数

      fileList1: [],
      imageSize: true,
      fileListB: [],
    };
  },
  created() {
    this.token = getToken();
    this.action = imgPath.imgPath;
    this.pmsChannel();

    this.selectAllByType();
    this.uuid = (uuidv4() + "").replace(/-/g, "").substring(0, 5);
    if (this.$route.query.id) {
      this.getData(this.$route.query.id);
    } else {
      this.selectAllByCategory();
      this.selectColor();
    }
    if (this.$route.query.data) {
      let data = this.$route.query.data;
      this.form = data.form;
      this.selColor = data.selColor;
      this.tableData = data.tableData;
      this.selColorValue = data.selColorValue;
      this.selZiseValue = data.selZiseValue;
      this.tableDataB = data.tableDataB;
      this.bigImgList = data.bigImgList;
      this.ztImgList = data.ztImgList;
      this.ctImg = data.ctImg;
      this.xqImgList = data.xqImgList;
      this.mp4One = data.mp4One;
      this.mp4Tow = data.mp4Tow;
      this.imageProtection = data.imageProtection;
      this.replenishmentTime = data.replenishmentTime;
      this.buyersShow = data.buyersShow;
      this.returnGoods = data.returnGoods;
      this.exchangeGoods = data.exchangeGoods;
      this.picturePackName = data.picturePackName;
    }
  },
  methods: {
    changeFile(file, fileList) {
      // if (this.xqImgList.length == 50) {
      //   this.$message.error("商品详情图片最多50张!");
      //   return false;
      // }
      this.upFileList = [];
      // this.disabledUpload = true;
      console.log("changeFile", file, fileList);

      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error("上传附件大小不能超过 5MB!");
        return false;
      }
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      console.log(testmsg);
      const isPDF = testmsg === "pdf";
      const isJPEG = testmsg === "jpge";
      const isJPG = testmsg === "jpg";
      const isPNG = testmsg === "png";
      console.log(isPNG);
      if (!isJPEG && !isJPG && !isPNG && !isPDF) {
        this.$message.error("上传图片仅支持jpg/jpeg/png格式!");
        return false;
      }
      this.upFileList = [];
      for (let i = 0; i < fileList.length; i++) {
        if (fileList[i].raw) {
          // 过滤掉非pdf 和小于100M的
          this.upFileList.push(fileList[i].raw);
          this.percentTotal = this.upFileList.length;
          this.percentNow = 0;
          this.showPercent = false;
          this.showDesc = "";
        }
        if (i == fileList.length - 1) {
          console.log("我执行啦");
          // this.$refs.upload1.clearFiles();
        }
      }

      clearTimeout(this.time);
      this.time = setTimeout(() => {
        this.time = null;
        console.log("防抖 高频触发后n秒内只会执行一次  再次触发重新计时");

        this.fnBegin(); //说明此时change了所有文件了 可以上传了
      }, 1500);
    },
    fnBegin() {
      console.log("此时change了所有文件 开始上传", this.upFileList);
      this.submitUpload2();
      this.$refs.upload1.clearFiles();
    },
    // 正式上传掉后端接口
    submitUpload2() {
      if (this.upFileList.length > 0) {
        if (this.upFileList.length > 50) {
          this.$message.error("商品详情图片最多50张!");
          return false;
        }
        console.log(this.xqImgList.length);
        if (this.xqImgList.length == 50) {
          this.$message.error("商品详情图片最多50张!");
          return false;
        }
        this.checkImageWH(this.upFileList[0], 5000, 20000).then((data) => {
          this.showPercent = true;

          this.fileNum = new FormData(); // new formData对象
          this.fileNum.append("file", this.upFileList[0]); // append增加数据
          this.fileNum.append("uuid", this.uuid); // append增加数据
          this.sfsctp = false;
          this.sfsctpB = false;
          let _vm = this;

          axios({
            url: this.action + "/common/upload/fileUploadProduct",
            headers: {
              "Content-Type": "multipart/form-data",
            },
            method: "post",
            data: this.fileNum,
          })
            .then((res2) => {
              this.sfsctp = true;
              this.sfsctpB = true;
              // 每次上传当前一个后 不论成功失败就删除当前这个--如果上传失败想继续传当前这个 就把这两行注释掉
              this.percentNow = this.percentNow + 1;
              this.upFileList.shift();

              console.log("上传返回", res2);
              if (res2.data.code == 200) {
                if (this.xqImgList.length < 50) {
                  this.xqImgList.push(res2.data.data);
                  this.jy();
                }

                // this.$message({
                //   message: "上传成功",
                //   type: 'success'
                // })

                // 进行递归 上传下一个
                this.submitUpload2();
              } else {
                _vm.$message({
                  message: res2.data.return_message || "上传失败",
                  type: "error",
                });

                // 进行递归 上传下一个
                this.showDesc = "上传结束，部分文件上传失败";
                this.submitUpload2();
              }
            })
            .catch((error) => {
              console.log(error);
              // _vm.$message({
              //   message: error || "上传失败",
              //   type: "error",
              // });

              // 每次上传当前一个后 不论成功失败就删除当前这个--如果上传失败想继续传当前这个 就把这两行注释掉
              this.percentNow = this.percentNow + 1;
              this.upFileList.shift();

              // 进行递归 上传下一个
              this.showDesc = "上传结束，部分文件上传失败";
              this.submitUpload2();
            });
        });
      } else {
        this.disabledUpload = false;
        this.showPercent = false;
        this.upFileList = []; //清空待传列表

        this.$refs.upload1.clearFiles();
        this.fileList1 = [];

        // if (this.percentNow == this.percentTotal && this.percentTotal) {
        //   this.$message.success(
        //     this.showDesc ? this.showDesc : "已全部上传成功！"
        //   );
        //   this.percentTotal = 0;
        //   this.percentNow = 0;
        //   this.showDesc = "";
        // } else if (
        //   this.percentNow == this.percentTotal &&
        //   this.percentTotal == 0
        // ) {
        //   this.$message.warning("请先选择文件！");
        //   this.percentTotal = 0;
        //   this.percentNow = 0;
        // } else {
        //   this.$message.success("已部分上传成功，且取消后续文件上传！");
        //   this.percentTotal = 0;
        //   this.percentNow = 0;
        // }

        return false;
      }
    },
    getImgXq() {
      this.$message.error("正在上传，请稍等!");
    },
    changeFileB(file, fileList) {
      // this.disabledUpload = true;
      this.upFileList = [];
      console.log("changeFile2", file, fileList);

      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error("上传附件大小不能超过 5MB!");
        return false;
      }
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      console.log(testmsg);
      const isPDF = testmsg === "pdf";
      const isJPEG = testmsg === "jpge";
      const isJPG = testmsg === "jpg";
      const isPNG = testmsg === "png";
      console.log(isPNG);
      if (!isJPEG && !isJPG && !isPNG && !isPDF) {
        this.$message.error("上传图片只能是 png,jpg,pdf 格式!");
        return false;
      }
      this.upFileList = [];
      for (let i = 0; i < fileList.length; i++) {
        if (fileList[i].raw) {
          // 过滤掉非pdf 和小于100M的
          this.upFileList.push(fileList[i].raw);
          this.percentTotal = this.upFileList.length;
          this.percentNow = 0;
          this.showPercent = false;
          this.showDesc = "";
        }
        if (i == fileList.length - 1) {
          console.log("我执行啦");
          // this.$refs.uploadImg.clearFiles();
        }
      }
      clearTimeout(this.time);
      this.time = setTimeout(() => {
        this.time = null;
        console.log("防抖 高频触发后n秒内只会执行一次  再次触发重新计时");
        this.fnBeginB(); //说明此时change了所有文件了 可以上传了
      }, 1500);
    },
    fnBeginB() {
      console.log("此时change了所有文件 开始上传", this.upFileList);
      this.submitUpload2B();
      this.$refs.uploadImg.clearFiles();
    },
    // 正式上传掉后端接口
    submitUpload2B() {
      if (this.upFileList.length > 0) {
        this.checkImageWHB(this.upFileList[0], 600, 600).then(() => {
          this.checkImageWH(this.upFileList[0], 800, 800).then(() => {
            this.showPercent = true;
            this.fileNum = new FormData(); // new formData对象
            this.fileNum.append("file", this.upFileList[0]); // append增加数据
            this.fileNum.append("uuid", this.uuid); // append增加数据

            let _vm = this;
            axios({
              url: this.action + "/common/upload/fileUploadProduct",
              headers: {
                "Content-Type": "multipart/form-data",
              },
              method: "post",
              data: this.fileNum,
            })
              .then((res2) => {
                // 每次上传当前一个后 不论成功失败就删除当前这个--如果上传失败想继续传当前这个 就把这两行注释掉
                this.percentNow = this.percentNow + 1;
                this.upFileList.shift();

                console.log("上传返回", res2);
                if (res2.data.code == 200) {
                  // this.xqImgList.push(res2.data.data);
                  let obj = {
                    value: null,
                    url: res2.data.data,
                    check: false,
                  };
                  this.bigImgList.push(obj);
                  this.imageUrl = this.bigImgList[0];
                  console.log(this.bigImgList, "图片数据");
                  // this.$message({
                  //   message: "上传成功",
                  //   type: 'success'
                  // })

                  // 进行递归 上传下一个
                  this.submitUpload2B();
                } else {
                  _vm.$message({
                    message: res2.data.return_message || "上传失败",
                    type: "error",
                  });

                  // 进行递归 上传下一个
                  this.showDesc = "上传结束，部分文件上传失败";
                  this.submitUpload2B();
                }
              })
              .catch((error) => {
                console.log(error);
                // _vm.$message({
                //   message: error || "上传失败",
                //   type: "error",
                // });

                // 每次上传当前一个后 不论成功失败就删除当前这个--如果上传失败想继续传当前这个 就把这两行注释掉
                this.percentNow = this.percentNow + 1;
                this.upFileList.shift();

                // 进行递归 上传下一个
                this.showDesc = "上传结束，部分文件上传失败";
                this.submitUpload2B();
              });
          });
        });
      } else {
        this.disabledUpload = false;
        this.showPercent = false;
        this.upFileList = []; //清空待传列表

        this.$refs.upload1.clearFiles();
        this.fileList1 = [];

        // if (this.percentNow == this.percentTotal && this.percentTotal) {
        //   this.$message.success(
        //     this.showDesc ? this.showDesc : "已全部上传成功！"
        //   );
        //   this.percentTotal = 0;
        //   this.percentNow = 0;
        //   this.showDesc = "";
        // } else if (
        //   this.percentNow == this.percentTotal &&
        //   this.percentTotal == 0
        // ) {
        //   this.$message.warning("请先选择文件！");
        //   this.percentTotal = 0;
        //   this.percentNow = 0;
        // } else {
        //   this.$message.success("已部分上传成功，且取消后续文件上传！");
        //   this.percentTotal = 0;
        //   this.percentNow = 0;
        // }

        return false;
      }
    },
    // 终止后需上传
    submitAbort() {
      this.showPercent = false;
      // .abort()不生效，故自己直接将this.upFileList置空 那么就不会走到递归了 就制止后续的上传了
      this.upFileList = [];

      // this.upFileList.forEach(ele => {
      //   this.$refs.upload1.abort(ele)
      // })
      // this.$refs.upload1.abort()
      // this.$message.warning('已取消后续文件上传！')
    },
    fileErr(err, file, fileList) {
      this.$message({
        message: file.name + "上传失败",
        type: "error",
      });
    },

    // 这两个事件不会再触发--因为阻止了自动上传
    beforeAvatarUpload(file) {
      console.log("上传文件前", file);
    },
    msgSuccessOne(data, file, fileList) {
      console.log("成功", file);
    },
    //修改类目
    editType() {
      this.$router.push({
        path: "CommodityCategory",
        query: {
          categoryId:
            this.$route.query.typeValue[this.$route.query.typeValue.length - 1],
          data: {
            form: this.form,
            selColor: this.selColor,
            tableData: this.tableData,
            selColorValue: this.selColorValue,
            selZiseValue: this.selZiseValue,
            tableDataB: this.tableDataB,
            bigImgList: this.bigImgList,
            ztImgList: this.ztImgList,
            ctImg: this.ctImg,
            xqImgList: this.xqImgList,
            mp4One: this.mp4One,
            mp4Tow: this.mp4Tow,
            imageProtection: this.imageProtection,
            replenishmentTime: this.replenishmentTime,
            buyersShow: this.buyersShow,
            returnGoods: this.returnGoods,
            exchangeGoods: this.exchangeGoods,
            picturePackName: this.picturePackName,
          },
        },
      });
    },
    //获取商品详情
    getData(id) {
      getData(id).then(({ data }) => {
        this.form.productCode = data.productCode;
        this.form.goodsName = data.goodsName;
        this.form.channelId = data.channelId;
        this.form.picturePack = data.picturePack;
        this.picturePackName = data.picturePack;
        this.selectAllByCategory(data);
        this.selectColor(data);
        this.imageUrl = data.pictureOriginal;
        this.ctImg = data.pictureLong;
        this.ztImgList = data.pictureSmall.split(",");
        this.xqImgList = data.intro.split(",");
        this.mp4One = data.descriptionVideo;
        this.mp4Tow = data.explainVideo;
        this.imageProtection = data.imageProtection + "";
        this.replenishmentTime = data.replenishmentTime + "";
        this.buyersShow = data.buyersShow + "";
        this.returnGoods = data.buyersShow;
        this.exchangeGoods = data.exchangeGoods;
      });
    },
    //发布商品
    saveProduct() {
      if (!this.sfsctp) {
        this.$message({
          message: "正在上传商品，请等待",
          type: "warning",
        });
        return false;
      }
      let show = true;
      this.tableDataB.forEach((item) => {
        if (!item.price) {
          show = false;
        }
        if (!item.kc) {
          show = false;
        }
      });
      if (!show) {
        this.$message({
          message: "请上传商品价格、库存",
          type: "warning",
        });
        return false;
      }
      if (!this.xqImgList.length) {
        this.$message({
          message: "请上传商品详情",
          type: "warning",
        });
        return false;
      }
      if (!this.selColor.length) {
        this.$message({
          message: "请选择商品颜色",
          type: "warning",
        });
        return false;
      }
      if (!this.tableData.length) {
        this.$message({
          message: "请选择商品尺码",
          type: "warning",
        });
        return false;
      }
      //  if (this.imageUrl == "") {
      //   this.$message({
      //     message: "请上传商品主图",
      //     type: "warning",
      //   });
      //   return false;
      // }
      let newShow = true;
      this.ztImgList.forEach((item) => {
        if (item == "") {
          newShow = false;
        }
      });
      if (!newShow) {
        this.$message({
          message: "最少上传6张商品主图",
          type: "warning",
        });
        return false;
      }
      this.imageUrl = this.ztImgList[0];
      this.$refs["ruleFormS"].validate((valid) => {
        if (valid) {
          let pmsSkuStocks = [];
          let pmsProductAttributeValues = [];
          let newTypeList = JSON.parse(JSON.stringify(this.form.typeList));
          newTypeList.forEach((item) => {
            if (item.chooseMaxNum > 1) {
              if (item.value) {
                item.value = item.value.join(",");
              }
            }
            let obj = {
              productAttributeName: item.name,
              productAttributeId: item.id,
              value: item.value,
              id: "",
              productId: "",
            };
            pmsProductAttributeValues.push(JSON.stringify(obj));
          });
          let newPmsObj = [];
          this.selColor.forEach((item) => {
            let obj = {
              picture: item.url,
              color: item.label,
              spData: [],
              id: "",
              productId: "",
            };
            pmsSkuStocks.push(obj);
          });
          this.tableDataB.forEach((item) => {
            pmsSkuStocks.forEach((item1) => {
              if (item.colorName == item1.color) {
                let obj = {
                  Height: item.Height,
                  Weight: item.Weight,
                  Size: item.Size,
                  price: item.price,
                  stock: item.kc,
                };
                item1.spData.push(JSON.stringify(obj));
              }
            });
          });
          let newPmsList = [];
          pmsSkuStocks.forEach((item) => {
            newPmsList.push(JSON.stringify(item));
          });

          console.log(newPmsList);
          let pictureOriginal = this.ztImgList.join(",");
          let intro = this.xqImgList.join(",");
          let params = {};
          if (this.$route.query.id) {
            params = {
              id: this.$route.query.id,
              productCode: this.form.productCode.replace(/\s/g, ""),
              goodsName: this.form.goodsName,
              channelId: this.form.channelId,
              picturePack: this.form.picturePack,
              pmsProductAttributeValues: pmsProductAttributeValues,
              pmsSkuStocks: newPmsList,
              pictureOriginal: this.imageUrl,
              pictureSmall: pictureOriginal,
              pictureLong: this.ctImg,
              intro: intro,
              descriptionVideo: this.mp4One,
              explainVideo: this.mp4Tow,
              returnGoods: this.returnGoods,
              exchangeGoods: this.exchangeGoods,
              categoryId:
                this.$route.query.typeValue[
                  this.$route.query.typeValue.length - 1
                ],
              pictureUuid: this.uuid,
              imageProtection: this.imageProtection * 1,
              replenishmentTime: this.replenishmentTime * 1,
              buyersShow: this.buyersShow * 1,
            };
          } else {
            params = {
              productCode: this.form.productCode.replace(/\s/g, ""),
              goodsName: this.form.goodsName,
              channelId: this.form.channelId,
              picturePack: this.form.picturePack,
              pmsProductAttributeValues: pmsProductAttributeValues,
              pmsSkuStocks: newPmsList,
              pictureOriginal: this.imageUrl,
              pictureSmall: pictureOriginal,
              pictureLong: this.ctImg,
              intro: intro,
              descriptionVideo: this.mp4One,
              explainVideo: this.mp4Tow,
              returnGoods: this.returnGoods,
              exchangeGoods: this.exchangeGoods,
              categoryId:
                this.$route.query.typeValue[
                  this.$route.query.typeValue.length - 1
                ],
              pictureUuid: this.uuid,
              imageProtection: this.imageProtection * 1,
              replenishmentTime: this.replenishmentTime * 1,
              buyersShow: this.buyersShow * 1,
            };
          }

          saveProduct(params).then((data) => {
            if (data.code == 200) {
              if (this.$route.query.id) {
                this.$message({
                  message: "编辑成功",
                  type: "success",
                });
                this.$router.push("/cangpushop");
              } else {
                this.$message({
                  message: "发布成功",
                  type: "success",
                });
                this.$router.back();
              }
            }
          });
        } else {
          return false;
        }
      });
    },
    //拖拽图片交换位置
    onDragOver(event) {
      event.preventDefault();
      const { src } = event.target;
      this.targetSrc = src;
    },
    onDragEnd(idx) {
      const targetIdx = this.xqImgList.indexOf(this.targetSrc);
      [this.xqImgList[idx], this.xqImgList[targetIdx]] = [
        this.xqImgList[targetIdx],
        this.xqImgList[idx],
      ];
      this.xqImgList = [...this.xqImgList];
    },
    //删除详情图片
    xqImgDel(index) {
      this.xqImgList.splice(index, 1);
    },
    //删除详情图片
    bigImgDel(index, item) {
      let obj = JSON.parse(JSON.stringify(this.ztImgList[index]));
      this.bigImgList.forEach((item1) => {
        if (item1.url == obj) {
          (item1.check = false), (item1.value = null);
        }
      });
      this.ztImgList[index] = "";
      this.$forceUpdate();
    },
    //输入价格
    priceBlur(val) {
      console.log(this.selColorValue == "", this.selZiseValue == "");
      if (this.selColorValue == "全部" && this.selZiseValue == "全部") {
        this.tableDataB.forEach((item) => {
          if (this.priceValue) {
            item.price = this.priceValue;
          }
        });
      } else if (
        this.selColorValue !== "全部" &&
        this.selZiseValue !== "全部"
      ) {
        this.tableDataB.forEach((item) => {
          if (
            item.colorName == this.selColorValue &&
            item.Size == this.selZiseValue
          ) {
            if (this.priceValue) {
              item.price = this.priceValue;
            }
          }
        });
      } else if (this.selColorValue !== "全部") {
        this.tableDataB.forEach((item) => {
          if (item.colorName == this.selColorValue) {
            if (this.priceValue) {
              item.price = this.priceValue;
            }
          }
        });
      } else if (this.selZiseValue !== "全部") {
        this.tableDataB.forEach((item) => {
          if (item.Size == this.selZiseValue) {
            if (this.priceValue) {
              item.price = this.priceValue;
            }
          }
        });
      }
    },
    priceBlurB(val) {
      console.log(this.selColorValue == "", this.selZiseValue == "");
      if (this.selColorValue == "全部" && this.selZiseValue == "全部") {
        this.tableDataB.forEach((item) => {
          if (this.kcValue) {
            item.kc = this.kcValue;
          }
        });
      } else if (
        this.selColorValue !== "全部" &&
        this.selZiseValue !== "全部"
      ) {
        this.tableDataB.forEach((item) => {
          if (
            item.colorName == this.selColorValue &&
            item.Size == this.selZiseValue
          ) {
            if (this.kcValue) {
              item.kc = this.kcValue;
            }
          }
        });
      } else if (this.selColorValue !== "全部") {
        this.tableDataB.forEach((item) => {
          if (item.colorName == this.selColorValue) {
            if (this.kcValue) {
              item.kc = this.kcValue;
            }
          }
        });
      } else if (this.selZiseValue !== "全部") {
        this.tableDataB.forEach((item) => {
          if (item.Size == this.selZiseValue) {
            if (this.kcValue) {
              item.kc = this.kcValue;
            }
          }
        });
      }
    },
    //校验条数
    jy() {
      let num = 0;
      if (this.form.productCode == "") {
        num++;
      }
      if (this.form.goodsName == "") {
        num++;
      }
      if (this.form.channelId == "") {
        num++;
      }
      if (this.form.picturePack == "") {
        num++;
      }
      if (this.tableDataB.length == 0) {
        num++;
      }
      if (this.imageUrl == "") {
        num++;
      }
      if (this.ztImgList.length == 0) {
        num++;
      }
      if (this.ctImg.length == 0) {
        num++;
      }
      if (this.xqImgList.length == 0) {
        num++;
      }
      if (this.loadingB == "") {
        num++;
      }
      if (this.mp4Tow == "") {
        num++;
      }
      if (!this.returnGoods) {
        num++;
      }
      if (!this.exchangeGoods) {
        num++;
      }
      this.num = num;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(row, column, rowIndex, columnIndex);
      if (columnIndex === 0) {
        if (rowIndex % this.tableData.length === 0) {
          return {
            rowspan: this.tableData.length,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    //删除尺码
    delSize(index) {
      this.tableData.splice(index, 1);
      this.newTabData = JSON.parse(JSON.stringify(this.tableData));
      this.newTabData.unshift({
        Size: "全部",
      });
      this.editCmData();
    },
    //新增尺码
    getSizeL() {
      this.$refs["abc"].validate((valid) => {
        if (valid) {
          this.cmform.add = true;
          this.tableData.unshift(this.cmform);
          this.newTabData = JSON.parse(JSON.stringify(this.tableData));
          this.newTabData.forEach((item, index) => {
            if (item.Size == "全部") {
              this.newTabData.splice(index, 1);
            }
          });
          this.newTabData.unshift({
            Size: "全部",
          });
          this.tableDataB = [];
          this.selColor.forEach((item) => {
            this.tableData.forEach((item1) => {
              let obj = {
                colorName: item.label,
                Size: item1.Size,
                Height: item1.Height,
                Weight: item1.Weight,
                price: "",
                kc: "",
              };
              this.jy();
              this.tableDataB.push(obj);
            });
          });
          this.dialogVisibleC = false;
          this.cmform = {};
        } else {
          return false;
        }
      });
    },
    //编辑尺码数据
    editCmData() {
      this.tableDataB = [];
      this.selColor.forEach((item) => {
        this.tableData.forEach((item1) => {
          let obj = {
            colorName: item.label,
            Size: item1.Size,
            Height: item1.Height,
            Weight: item1.Weight,
            price: "",
            kc: "",
          };
          this.jy();
          this.tableDataB.push(obj);
        });
      });
    },
    //根据名字获取尺码数据
    pmsSelectAllByType(val) {
      pmsSelectAllByType({
        name: val,
      }).then((data) => {
        this.tableData = data.data;
        this.newTabData = JSON.parse(JSON.stringify(this.tableData));
        this.newTabData.unshift({
          Size: "全部",
        });
        this.tableDataB = [];
        this.selColor.forEach((item) => {
          this.tableData.forEach((item1) => {
            let obj = {
              colorName: item.label,
              Size: item1.Size,
              Height: item1.Height,
              Weight: item1.Weight,
              price: "",
              kc: "",
            };
            this.jy();
            this.tableDataB.push(obj);
          });
        });
        console.log(this.tableDataB);
      });
    },
    //获取尺码范围
    selectAllByType() {
      selectAllByType({
        name: "SizeGroup",
      }).then((data) => {
        this.SizeGroupList = data.data;
      });
    },
    //删除颜色
    del(index) {
      let arr = JSON.parse(JSON.stringify(this.colorValue));
      this.colorValue = [];
      arr.forEach((item, index1) => {
        if (item[1] == this.selColor[index].value) {
          arr.splice(index1, 1);
        }
      });
      this.colorValue = arr;
      console.log(this.colorValue);
      this.selColor.splice(index, 1);
      this.newSelColor = JSON.parse(JSON.stringify(this.selColor));
      this.newSelColor.unshift({
        label: "全部",
      });
      this.$forceUpdate();
      this.editCmData();
    },
    //选择图片包图片
    selZipImg(index) {
      if (this.zipImgList.length) {
        this.colorIndex = index;
        this.dialogVisibleB = true;
      } else {
        this.$message({
          message: "请先上传图片包",
          type: "warning",
        });
      }
    },
    //获取颜色列表
    selectColor(res) {
      if (this.dialogVisible) {
        this.$refs.auocleft.activated = false;
      }
      // this.$refs.auocleft.activated = false;
      selectColor({
        name: this.input2,
      }).then((data) => {
        this.colorList = data.data;
        if (this.$route.query.id) {
          res.pmsSkuStocks.forEach((item, index) => {
            this.colorList.forEach((item1) => {
              if (item.color == item1.colorName) {
                let obj = {
                  label: item1.colorName,
                  value: item1.rgb,
                  id: index,
                  url: "",
                };
                this.selColor.push(obj);
              }
              item1.colors.forEach((item2) => {
                if (item.color == item2.colorName) {
                  let obj = {
                    label: item2.colorName,
                    value: item2.rgb,
                    id: index,
                    url: item.picture,
                  };
                  this.selColor.push(obj);
                }
              });
            });
          });
          let arr = [];
          res.pmsSkuDTOS.forEach((item) => {
            let obj = {
              Height: item.height,
              Size: item.size,
              Weight: item.weight,
            };
            arr.push(obj);
          });
          let num = res.pmsSkuDTOS.length / res.pmsSkuStocks.length;
          this.tableData = arr.slice(0, num);
          console.log(this.tableData, res, "12312");
          this.tableDataB = [];
          this.selColor.forEach((item) => {
            this.tableData.forEach((item1) => {
              let obj = {
                colorName: item.label,
                Size: item1.Size,
                Height: item1.Height,
                Weight: item1.Weight,
                price: "",
                kc: "",
              };
              this.jy();
              this.tableDataB.push(obj);
            });
          });
          this.tableDataB.forEach((item) => {
            res.pmsSkuDTOS.forEach((item1) => {
              if (item.Size == item1.size) {
                (item.price = item1.price), (item.kc = item1.stock);
              }
            });
          });
        }

        data.data.forEach((item) => {
          var oneName = item.colorName;
          let obj = {
            value: item.colorName,
            Rgb: item.rgb,
            cj: 1,
            uuid: (uuidv4() + "").replace(/-/g, "").substring(0, 5),
          };
          this.restaurants.push(obj);
          item.colors.forEach((item1) => {
            let obj = {
              value: item1.colorName,
              Rgb: item.rgb,
              oneName: oneName,
              cj: 2,
              uuid: (uuidv4() + "").replace(/-/g, "").substring(0, 5),
            };
            this.restaurants.push(obj);
          });
        });
      });
      console.log(this.restaurants, "颜色");
    },
    getCascader() {
      // this.selColor = [];
      this.dialogVisible = false;
      let data = this.$refs.cascaderRes.getCheckedNodes();
      // console.log(this.colorValue,data);
      if (data.length) {
        data.forEach((item) => {
          if (!item.children.length) {
            let obj = {
              label: item.label,
              value: item.value,
              id: item.uid,
              url: "",
            };
            this.selColor.push(obj);
          }
        });

        this.selColor = this.selColor.filter(
          (item, index) =>
            this.selColor.findIndex((i) => i.value === item.value) === index
        );
        this.newSelColor = JSON.parse(JSON.stringify(this.selColor));
        this.newSelColor.unshift({
          label: "全部",
        });
        if (this.form.sizeFrop) {
          this.pmsSelectAllByType(this.form.sizeFrop);
        }
        console.log(this.colorValue);
      }
    },
    //颜色选中
    handleSelect(val) {
      this.$refs.auocleft.activated = false;
      this.selectColor();
    },
    //颜色搜索
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      results = results.filter(
        (item, index) =>
          results.findIndex((i) => i.value === item.value) === index
      );
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    //获取类目属性
    selectAllByCategory(res) {
      let categoryId = this.$route.query.typeValue[2]
        ? this.$route.query.typeValue[2]
        : this.$route.query.typeValue[1];
      selectAllByCategory({
        categoryId: categoryId,
      }).then((data) => {
        data.data.forEach((item) => {
          item.inputList = item.inputList.split(",");
          let obj = {};
          if (item.chooseMaxNum > 1) {
            item.value = [];
            // obj = {
            //   value:  ['12'],
            //   ...item,
            // };
          } else {
            // obj = {
            //   value: "",
            //   ...item,
            // };
          }

          if (this.$route.query.id) {
            res.pmsProductAttributeValues.forEach((item, index) => {
              this.form.typeList.forEach((item1) => {
                if (item.productAttributeName == item1.name) {
                  item1.value = item.value;
                  if (item1.name == "适用年龄") {
                    item1.value = item1.value.split(",");
                  }
                }
              });
            });
          }
          if (this.$route.query.typeShow == "1") {
            let data = this.$route.query.data;
            this.form = data.form;
            this.selColor = data.selColor;
            this.tableData = data.tableData;
            this.selColorValue = data.selColorValue;
            this.selZiseValue = data.selZiseValue;
            this.tableDataB = data.tableDataB;
            this.bigImgList = data.bigImgList;
            this.ztImgList = data.ztImgList;
            this.ctImg = data.ctImg;
            this.xqImgList = data.xqImgList;
            this.mp4One = data.mp4One;
            this.mp4Tow = data.mp4Tow;
            this.imageProtection = data.imageProtection;
            this.replenishmentTime = data.replenishmentTime;
            this.buyersShow = data.buyersShow;
            this.returnGoods = data.returnGoods;
            this.exchangeGoods = data.exchangeGoods;
            this.picturePackName = data.picturePackName;
          } else {
            console.log("我执行啦");
            this.form.typeList.push(item);
          }
        });
        // this.form.typeList = data.data;
      });
    },
    //获取频道
    pmsChannel() {
      pmsChannel().then((data) => {
        this.options = data.data;
      });
    },
    //超出最大限制
    onExceed(files, fileList) {
      this.$message({
        message: "请删除后再上传",
        type: "warning",
      });
    },
    scrollToLinkTitle(index) {
      // 获取含样式类 class="link_title" 的所有元素，得到一个数组（列表）
      let titleList = document.querySelectorAll(".link_title");
      // offsetTop为元素顶部与整个文档顶部间的距离
      let offsetTop = titleList[index].offsetTop;
      // offset为平滑滚动结束后，元素顶部与显示屏顶部间的距离,默认为0，页面滚动到标题触顶
      let offset = 150;
      offsetTop -= offset;
      // scrollTop为显示屏顶部与整个文档顶部间的距离
      let scrollTop = document.querySelector("#main").scrollTop;
      // 步长（时长500ms，每10ms一跳，共50跳）
      let step = Math.abs(offsetTop - scrollTop) / 50;
      if (offsetTop > scrollTop) {
        // offsetTop > scrollTop 时元素在显示屏下方时，滚动条需下滑
        // scrollTop需增加（offsetTop-scrollTop）
        smoothDown();
      } else {
        // offsetTop < scrollTop 时元素在显示屏上方时，滚动条需上滑
        // scrollTop需减少（scrollTop - offsetTop）
        smoothUp();
      }
      // 向上平滑滚动
      function smoothUp() {
        if (scrollTop > offsetTop) {
          scrollTop -= step;
          document.querySelector("#main").scrollTop = scrollTop;
          document.querySelector("#main").scrollTop = scrollTop;
          setTimeout(smoothUp, 10);
        } else {
          document.querySelector("#main").scrollTop = offsetTop;
          document.querySelector("#main").scrollTop = offsetTop;
        }
      }
      // 向下平滑滚动
      function smoothDown() {
        if (scrollTop < offsetTop) {
          scrollTop += step;
          document.querySelector("#main").scrollTop = scrollTop;
          document.querySelector("#main").scrollTop = scrollTop;
          setTimeout(smoothDown, 10);
        } else {
          document.querySelector("#main").scrollTop = offsetTop;
          document.querySelector("#main").scrollTop = offsetTop;
        }
      }
    },

    //锚点跳转
    AnchorPoint(index, val) {
      this.listIndex = index;
      // document.querySelector(`#${val}`).scrollIntoView()
      this.scrollToLinkTitle(index);
    },
    beforeRemove() {},
    //上传视频
    handleAvatarSuccessMp4(res) {
      this.loadingB = false;
      if (res.code == 200) {
        this.mp4One = res.data;
        this.jy();
      } else {
        this.$message.error(res.message);
      }
    },
    //选中图片包图片
    getZipImg() {
      this.srcList = [];
      this.selColor[this.colorIndex].url = this.zipImgList[this.zipIndex];
      this.selColor.forEach((item) => {
        if (item.url) {
          this.srcList.push(item.url);
        }
      });
      this.dialogVisibleB = false;
    },
    //上传图片
    handleAvatarSuccessB(res) {
      this.loading = false;
      this.srcList = [];
      this.selColor[this.colorIndex].url = res.data;
      this.selColor.forEach((item) => {
        if (item.url) {
          this.srcList.push(item.url);
        }
      });
    },
    //上传主图
    handleAvatarSuccessC(res) {
      // this.loading = false;

      let obj = {
        value: null,
        url: res.data,
        check: false,
      };
      this.bigImgList.push(obj);
      this.imageUrl = this.bigImgList[0];
      // this.jy();
    },
    //选中图片
    getNewImg(item, index) {
      if (item.check) {
        item.check = false;
      } else {
        let newNum = 0;
        this.bigImgList.forEach((item1) => {
          if (item1.check) {
            newNum = newNum + 1;
          }
        });
        if (newNum == 6) {
          return false;
        } else {
          item.check = true;
        }
      }

      if (item.check) {
        for (let i = 0; i < this.ztImgList.length; i++) {
          if (!item.value) {
            if (this.ztImgList[i] == "") {
              item.value = i;
              break;
            }
          }
        }

        this.bigImgList.forEach((item2) => {
          if (item2.check) {
            this.ztImgList[item2.value] = item2.url;
          }
        });
      } else {
        this.ztImgList[item.value] = "";
        item.value = null;
      }
      if (this.ztImgList.length) {
        this.imageUrl = this.ztImgList[0];
      }

      // item.value = num;
    },
    //上传6张图片
    handleAvatarSuccessD(res) {
      this.ztImgList[0] = res.data;
      this.jy();
      this.$forceUpdate();
    },
    handleAvatarSuccessD2(res) {
      this.ztImgList[1] = res.data;
      this.jy();
      this.$forceUpdate();
    },
    handleAvatarSuccessD3(res) {
      this.ztImgList[2] = res.data;
      this.jy();
      this.$forceUpdate();
    },
    handleAvatarSuccessD4(res) {
      this.ztImgList[3] = res.data;
      this.jy();
      this.$forceUpdate();
    },
    handleAvatarSuccessD5(res) {
      this.ztImgList[4] = res.data;
      this.jy();
      this.$forceUpdate();
    },
    handleAvatarSuccessD6(res) {
      this.ztImgList[5] = res.data;
      this.jy();
      this.$forceUpdate();
    },
    //上传上图
    handleAvatarSuccessE(res) {
      this.loading = false;
      this.ctImg = res.data;
      this.jy();
    },
    //上传商品详情图片
    handleAvatarSuccessF(res) {
      this.loading = false;
      this.xqImgList.push(res.data);
      this.jy();
    },
    // 配置图片像素
    checkImageWH(file, width, height) {
      let self = this;
      return new Promise(function (resolve, reject) {
        let filereader = new FileReader();
        filereader.onload = (e) => {
          let src = e.target.result;
          const image = new Image();
          image.onload = function () {
            if (width && this.width > width) {
              self.imageSize = false;
              self.$message.warning(
                "请上传宽为小于或等于" + width + "像素的图片"
              );
              self.$refs.uploadImg.clearFiles();
              self.$refs.upload1.clearFiles();
              reject();
            } else if (height && this.height > height) {
              self.imageSize = false;
              self.$message.warning(
                "请上传高度小于或等于" + height + "像素的图片"
              );
              self.$refs.uploadImg.clearFiles();
              self.$refs.upload1.clearFiles();
              reject();
            } else {
              resolve();
            }
          };
          image.onerror = reject;
          image.src = src;
        };
        filereader.readAsDataURL(file);
      });
    },
    checkImageWHB(file, width, height) {
      let self = this;
      return new Promise(function (resolve, reject) {
        let filereader = new FileReader();
        filereader.onload = (e) => {
          let src = e.target.result;
          const image = new Image();
          image.onload = function () {
            console.log(this.width, "宽度");
            if (width && this.width < width) {
              self.$message.warning(
                "请上传宽为大于或等于" + width + "像素的图片"
              );
              self.$refs.uploadImg.clearFiles();
              reject();
            } else if (height && this.height < height) {
              self.$message.warning(
                "请上传高度大于或等于" + height + "像素的图片"
              );
              self.$refs.uploadImg.clearFiles();
              reject();
            } else if (this.width !== this.height) {
              self.$message.warning("请上传长宽一致的正方形图片");
              self.$refs.uploadImg.clearFiles();
              reject();
            } else if (this.width > 800) {
              self.$message.warning("请上传宽度小于或等于800像素的图片");
              self.$refs.uploadImg.clearFiles();
              reject();
            } else if (this.height > 800) {
              self.$message.warning("请上传高度小于或等于800像素的图片");
              self.$refs.uploadImg.clearFiles();
              reject();
            } else {
              resolve();
            }
          };
          image.onerror = reject;
          image.src = src;
        };
        filereader.readAsDataURL(file);
      });
    },
    checkImageWHC(file, width, height) {
      let self = this;
      return new Promise(function (resolve, reject) {
        let filereader = new FileReader();
        filereader.onload = (e) => {
          let src = e.target.result;
          const image = new Image();
          image.onload = function () {
            console.log(this.width, "宽度");
            if (this.width !== this.height) {
              self.$message.warning("请上传长宽一致的正方形图片");
              reject();
            } else {
              resolve();
            }
          };
          image.onerror = reject;
          image.src = src;
        };
        filereader.readAsDataURL(file);
      });
    },
    //图片校验
    beforeAvatarUploadB(file) {
      if (this.xqImgList.length > 50) {
        this.$message.error("商品详情图片最多50张!");
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error("上传附件大小不能超过 5MB!");
        return false;
      }
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isPDF = testmsg === "pdf";
      if (!isJPEG && !isJPG && !isPNG && !isPDF) {
        this.$message.error("上传图片仅支持jpg/jpeg/png格式!");
        return false;
      } else {
        // 这个方法就是去限制上传图片的像素控制
        return this.checkImageWH(file, 5000, 20000);
      }
      this.loading = true;
      return true;
    },
    //图片校验
    beforeAvatarUploadC(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error("上传附件大小不能超过 5MB!");
        return false;
      }
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isPDF = testmsg === "pdf";
      if (!isJPEG && !isJPG && !isPNG && !isPDF) {
        this.$message.error("上传图片只能是 png,jpg,pdf 格式!");
        return false;
      } else {
        // 这个方法就是去限制上传图片的像素控制
        return this.checkImageWHB(file, 600, 600);
      }
      this.loading = true;
      return true;
    },
    beforeAvatarUploadS(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error("上传附件大小不能超过 5MB!");
        return false;
      }
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isPDF = testmsg === "pdf";
      if (!isJPEG && !isJPG && !isPNG && !isPDF) {
        this.$message.error("上传图片只能是 png,jpg,pdf 格式!");
        return false;
      } else {
        // 这个方法就是去限制上传图片的像素控制
        return this.checkImageWH(file, 750, 1000);
      }
      this.loading = true;
      return true;
    },
    //获取图片包图片
    selectZipImages(id, file, index) {
      selectZipImages({
        uuid: id,
      }).then((data) => {
        console.log(data.data.length, index);
        /*if (data.data.length < index) {
          setTimeout(() => {
            this.selectZipImages(id, file, index);
          }, 1000);
        } else {
          this.zipImgList = [];
          this.zipImgList = data.data;
          this.imgList = res.data;
          let obj = {
            name: file.name,
            url: " ",
          };
          this.jy();
          this.fileList = [obj];
        }*/
      });
    },
    //上传
    handleAvatarSuccess(res, file) {
      this.loading = false;
      if (res.code == 200) {
        if (this.fileList.length) {
          this.fileList = [];
        }
        this.form.picturePack = res.data[0];
        this.picturePackName = res.data[2];
      } else {
        this.$message.error(res.message);
      }

      // this.selectZipImages(res.data[1], file, res.data[2]);
      // this.zipImgList = [];
      // this.zipImgList = res.data[1];

      // this.imgList = res.data[1];
      // let obj = {
      //   name: file.name,
      //   url: " ",
      // };
      // this.jy();
      // this.fileList = [obj];
    },
    //上传校验
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 400;
      if (!isLt2M) {
        this.$message.error("上传附件大小不能超过 400MB!");
        return false;
      }
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isZIP = testmsg === "zip";
      if (!isZIP) {
        this.$message.error("上传文件只能是 zip 格式!");
        return false;
      }
      this.loading = true;
      return true;
    },
    //MP4上传校验
    beforeAvatarUploadMp4(file) {
      const isLt2M = file.size / 1024 / 1024 < 100;
      if (!isLt2M) {
        this.$message.error("上传视频大小不能超过 100MB!");
        return false;
      }
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isZIP = testmsg === "mp4";
      if (!isZIP) {
        this.$message.error("上传文件只能是 mp4 格式!");
        return false;
      }
      this.loadingB = true;
      return true;
    },
    beforeAvatarUploadMp4B(file) {
      const isLt2M = file.size / 1024 / 1024 < 100;
      if (!isLt2M) {
        this.$message.error("上传视频大小不能超过 100MB!");
        return false;
      }
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isZIP = testmsg === "mp4";
      if (!isZIP) {
        this.$message.error("上传文件只能是 mp4 格式!");
        return false;
      }
      this.loadingC = true;
      return true;
    },
    handleAvatarSuccessMp4B(res) {
      this.loadingC = false;
      if (res.code == 200) {
        this.mp4Tow = res.data;
        this.jy();
      } else {
        this.$message.error(res.message);
      }
    },
    //删除MP4
    Mp4Del() {
      this.mp4One = "";
    },
    Mp4DelB() {
      this.mp4Tow = "";
    },
  },
  watch: {
    dialogVisible() {
      if (!this.dialogVisible) {
        this.input2 = "";
        this.selectColor();
      }
    },
  },
};
</script>

<style scoped lang="scss">
/deep/ .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #606266;
}
/deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}
/deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
  border-color: #fff;
}
/deep/ .el-input__suffix {
  display: flex;
  align-items: center;
}
.newDialog {
  /deep/ .el-divider {
    margin: 0px;
  }
  /deep/ .el-dialog__header {
    padding: 0;
  }

  /deep/ .el-dialog__body {
    padding: 0;
    padding-top: 10px;
    padding-bottom: 60px;
  }
  .btnBox {
    display: flex;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    .gray {
      color: #000000;
      background: #f5f7f9;
    }
    .red {
      margin-left: 0.52rem;
      background: #e22a1f;
      color: #ffffff;
    }
  }
  .btnBox div {
    cursor: pointer;
    width: 1.2rem;
    height: 0.41rem;
    border-radius: 0.04rem;
    font-family: PingFang SC;
    font-size: 0.14rem;
    line-height: 0.41rem;

    text-align: center;
  }
  .DiaLogHeader {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    .titlebOX {
      font-size: 16px;
      font-weight: 700;
    }
    .chahao {
      width: 20px;
      height: 20px;
      background-size: 100% 100%;
      text-align: center;
      line-height: 20px;
      color: #999999;
      cursor: pointer;
      /deep/ .el-icon-close {
        font-size: 0.2rem;
      }
    }
  }
  .contentBox {
    margin: 0.2rem;
    font-size: 0.1rem;
    /deep/ .el-form-item__content {
      width: 90%;
    }
    ::v-deep .el-input__inner {
      background: #f5f7f9 !important;
    }
    .cascaderBox {
      margin-top: 0.1rem;
      height: 30vh;
      /deep/ .el-cascader-menu__wrap {
        height: 30vh;
      }
      /deep/ .el-cascader-node.in-active-path {
        color: #e22a1f;
      }
      /deep/ .el-cascader-node.is-active {
        color: #e22a1f;
      }
    }
    .selectBox {
      font-size: 0.15rem;
      color: #999999;
      margin-top: 0.1rem;
      display: flex;
      .typeBox {
        color: #666;
      }
    }
    .imgContent {
      display: flex;
      flex-wrap: wrap;
      .newImgBox {
        position: relative;
        margin: 0 0.1rem;
        border-radius: 4px;
        overflow: hidden;
        /deep/ .el-icon-circle-check {
          position: absolute;
          font-size: 0.2rem;
          top: 0;
          right: 0;
          cursor: pointer;
        }
        .newICon {
          color: #e22a1f;
        }
      }
      .newImgBoxB {
        border: 0.01rem solid #e22a1f;
      }
    }
  }
}
.main {
  width: 100%;
  display: flex;
  // padding: 0.2rem 0.17rem 0 0.19rem;
  ::v-deep .el-input--suffix .el-input__inner {
    background: #f5f7f9 !important;
  }
  .leftBox {
    width: 15vw;
    .cardBox {
      width: 100%;
      height: 1.2rem;
      background-image: linear-gradient(to bottom right, #f7c727, #fa904e);
      border-radius: 10px;
      margin-bottom: 0.2rem;
      .content {
        padding: 0.1rem;
        .headerBox {
          font-size: 0.16rem;
          color: #fff;
          font-weight: 700;
        }
        .numBox {
          margin-top: 0.1rem;
          display: flex;
          color: #fff;
          font-size: 0.16rem;
          align-items: center;

          .num {
            font-size: 0.3rem;
            margin-right: 0.1rem;
            font-weight: 700;
            font-family: "DIN-BlackItalic-Regular";
          }
        }
      }
    }
    .listBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0.2rem 0;
      cursor: pointer;
      .nameBox {
        color: #666666;
        font-size: 0.16rem;
      }
      .newName {
        font-weight: 700;
        color: #e22a1f;
      }
      .yuandian {
        width: 0.08rem;
        height: 0.08rem;
        border-radius: 50%;
        background: #e8e8e8;
      }
      .newYuan {
        background: #e22a1f;
      }
    }
  }
  .rightBox {
    flex: 1;
    margin-left: 0.2rem;
    height: 82vh;
    overflow-y: auto;
    .newTitelbnOX {
      font-size: 0.16rem;
      color: #999999;
      display: flex;
      align-items: center;
      /deep/ .el-button {
        padding: 0;
        margin-left: 20px;
        font-size: 0.16rem;
      }
      .typeBox {
        color: #666666;
        margin-left: 0.05rem;
      }
    }
  }
  .top {
    margin-bottom: 0.2rem;
    margin-top: 0.2rem;
    /deep/ .el-input__suffix {
      display: flex;
      align-items: center;
    }
    /deep/ .el-select {
      width: 100%;
    }
    .left {
      font-family: PingFang SC;
      font-size: 0.14rem;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .btnBox {
        padding: 0 0;
        background: #e22a1f;
        color: #fff;
        border-radius: 0.4rem;
        width: 1rem;
        text-align: center;
        cursor: pointer;
      }
      /deep/ .el-form-item {
        width: 33%;
      }
      /deep/ .el-form-item__content {
        width: 65%;
      }
    }
    ::v-deep .el-input__inner {
      background: #f5f7f9 !important;
      // width: 13.91rem !important;
    }
  }
  .middle {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 0.2rem;

    .jichu {
      .box1 {
        margin-top: 0.2rem;
        width: 4rem;
      }
      .box2 {
        color: red;
        font-size: 0.14rem;
      }
      .box3 {
        color: #a7adb8;
        font-size: 0.14rem;
        .lanBox {
          color: #399ef1;
          margin-left: 0.1rem;
          cursor: pointer;
        }
      }
      ::v-deep .el-input__inner {
        background: #f5f7f9 !important;
        // width: 13.91rem !important;
      }
      // width: calc(100%-0.36rem);
      border: 0.01rem solid #e8e8e8;
      padding: 0.2rem 0.17rem 0 0.19rem;
      .title {
        font-family: PingFang SC;
        font-size: 0.16rem;
        font-weight: bold;
        .redBox {
          color: #e22a1f;
          font-size: 0.1rem;
        }
      }
      .newTitle {
        font-size: 0.14rem;
        color: #3d3d3d;
        margin-top: 0.1rem;
      }
      .mainbox {
        padding-bottom: 0.48rem;
        margin-top: 0.2rem;
        font-family: PingFang SC;
        font-size: 0.14rem;
        .upImgBox {
          display: flex;
          /deep/ .el-loading-spinner {
            top: 30%;
          }
          /deep/ .el-upload {
            width: 100%;
            height: 100%;
          }
          /deep/ .avatar-uploader {
            width: 100%;
            height: 100%;
          }
          .uploadBoxS {
            display: flex;
            // flex-direction: column;
            align-items: center;
            // justify-content: center;
            // text-align: center;
            color: #666666;
            margin: 0.1rem 0.2rem;
          }
          .uploadBox {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #666666;
            margin: 0.1rem 0.2rem;
            height: 70%;
          }
          .bigImgBoxs {
            display: flex;
            flex-wrap: wrap;
            height: 2.1rem;
            overflow-y: auto;
            .bigImgBox {
              margin: 0.1rem;

              height: 1rem;
              background: #f5f7f9;
              margin-right: 0.1rem;
              position: relative;
              border-radius: 4px;
              overflow: hidden;
            }
          }
          .leftImg {
            width: 2.61rem;
            min-height: 2.61rem;
            background: #f5f7f9;
            border-radius: 4px;
            position: relative;
            overflow: hidden;
            .botBox {
              background: #e8e8e8;
              position: absolute;
              bottom: 0;
              width: 100%;
              padding: 0.1rem 0;
              text-align: center;
            }
          }
          .rightImg {
            margin-left: 0.2rem;
            .textBox {
              color: #3d3d3d;
              font-size: 12px;
            }
            .imgLists {
              margin: 0.1rem 0;
              display: flex;
              .imgBox {
                width: 1rem;
                height: 1rem;
                background: #f5f7f9;
                margin-right: 0.1rem;
                position: relative;
                border-radius: 4px;
                overflow: hidden;
                .baidi {
                  background: #fcaea9;
                  position: absolute;
                  bottom: 0;
                  width: 100%;
                  color: #fff;
                  text-align: center;
                }
              }
            }
          }
        }
        .newTitle {
          color: #3d3d3d;
          font-size: 0.14rem;
        }
        .newContent {
          display: flex;
          margin-top: 0.1rem;
          .headerBox {
            background: #f5f7f9;
            padding: 0.1rem;
            font-size: 0.14rem;
            color: #3d3d3d;
            .huitext {
              font-size: 0.1rem;
              color: #999999;
              margin-left: 0.05rem;
              .redTetx {
                color: #e22a1f;
              }
            }
          }
          .xqLeftBox {
            width: 2.61rem;
            border: 0.01rem solid #e8e8e8;
            border-radius: 4px;
          }
          .leftContent {
            height: 4rem;
            overflow-y: auto;
            .xqImgClass {
              width: 100%;
            }
            .btnBox {
              padding: 0.08rem 0;
              background: #e22a1f;
              color: #fff;
              border-radius: 0.4rem;
              width: 1rem;
              text-align: center;
              margin: 0.1rem;
              cursor: pointer;
            }
          }
          .xqRightBox {
            margin-left: 0.1rem;
            border: 0.01rem solid #e8e8e8;
            border-radius: 4px;
            //flex: 1;
            width: 10rem;
          }
        }
        ::v-deep .el-input__inner {
          background: #f5f7f9 !important;
        }
        .upload {
          width: 1.34rem;
          height: 0.36rem;
          border-radius: 0.2rem;
          background: #e22a1f;
          line-height: 0.36rem;
          text-align: center;
          color: #ffffff;
          margin-top: 0.14rem;
          cursor: pointer;
        }
        .colorBox {
          display: flex;
          flex-wrap: wrap;
          margin-top: 0.1rem;
          .listBox {
            display: flex;
            width: 30%;
            align-items: center;
            margin-bottom: 0.1rem;
            /deep/ i {
              font-size: 0.15rem;
              margin: 0 0.1rem;
              cursor: pointer;
            }
            .upBtn {
              background: #f5f7f9;
              height: 35px;
              padding: 0 0.1rem;
              line-height: 35px;
              border-radius: 4px;
              cursor: pointer;
              border: 1px solid #dcdfe6;
              margin-left: 0.1rem;
            }
          }
        }
        ::v-deep .el-input--suffix .el-input__inner {
          background: #f5f7f9 !important;
          // width: 13.91rem !important;
        }
        .loads {
          margin-top: 0.13rem;
          display: flex;
          .ImgListBox {
            display: flex;
            position: relative;
            /deep/ .el-icon-close {
              position: absolute;
              right: 5px;
              top: 5px;
              cursor: pointer;
              z-index: 1;
            }
          }
          .lefttext {
            margin-top: 0.54rem;
            font-size: 0.14rem;
            font-weight: normal;
            color: #a7adb8;
          }
          .lefttext div {
            margin-bottom: 0.09rem;
          }
          // align-items: center;
          .items {
            margin-right: 0.1rem;
            ::v-deep .el-icon-plus:before {
              color: transparent !important;
              z-index: inherit !important;
              font-size: 1.5rem !important;
            }
            ::v-deep .avatar-uploader-icon {
              z-index: 9999999 !important;
            }
            ::v-deep .avatar-uploader .el-upload {
              width: 1.2rem;
              height: 1.2rem;
              border-radius: 0.08rem 0.08rem 0.1rem 0.1rem;
              // border: 0.01rem dashed #d9d9d9;
              // border-radius: 0.06rem;
              cursor: pointer;
              position: relative;
              overflow: hidden;
              border: 0.01rem dashed #e8e8e8;
            }
            ::v-deep .avatar-uploader {
              background: #f5f7f9 !important;
              border-radius: 0.08rem 0.08rem 0.1rem 0.1rem !important;
              border: 0.01rem dashed #e8e8e8 !important;
            }
            .avatar-uploader .el-upload:hover {
              border-color: #409eff;
            }
            .avatar-uploader-icon {
              font-size: 28px;
              color: #8c939d;
              width: 178px;
              height: 178px;
              line-height: 178px;
              text-align: center;
            }
            .avatar {
              width: 2.61rem;
              height: 2.61rem;
              display: block;
            }
            ::v-deep .el-select {
              margin-left: 0.12rem;
            }
            ::v-deep .el-input--suffix .el-input__inner {
              background: #f5f7f9 !important;
              width: 4rem !important;
            }
            ::v-deep .el-input__inner {
              background: #f5f7f9 !important;
              width: 4rem !important;
            }

            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            .logo {
              display: flex;
              align-items: center;
              position: absolute;
              font-family: Source Han Sans CN;
              font-size: 0.12rem;
              color: #666666;
              cursor: pointer;
              width: 100%;
              height: 100%;
              justify-content: center;
            }
            .toptitle {
              width: 1.2rem;
              height: 0.3rem;
              border-radius: 0.08rem 0.08rem 0 0;
              opacity: 1;
              background: #ff9fa3;
              position: absolute;
              top: 0.02rem;
              font-family: PingFang SC;
              font-size: 0.12rem;
              text-align: center;
              line-height: 0.3rem;
              color: #ffffff;
            }
            // width: 1.2rem;
            // height: 1.2rem;
          }
        }
      }
    }
    .shop {
      margin-top: 0.2rem;
      border: 0.01rem solid #e8e8e8;
      width: calc(100%-1.69rem);
      padding: 0.16rem 1.49rem 0.23rem 0.2rem;
      ::v-deep .el-input__inner {
        background: #f5f7f9 !important;
        width: 3.8rem !important;
      }
      .toptitle {
        font-family: PingFang SC;
        font-size: 0.16rem;
        font-weight: bold;
      }
      .item {
        font-family: PingFang SC;
        font-size: 0.14rem;
        display: flex;
        align-items: center;
        margin-top: 0.2rem;
      }
      .item > div {
        margin-right: 0.2rem;
      }
      .buttom {
        margin-top: 0.2rem;
        display: flex;
        .left {
          position: relative;
          width: 3.35rem;
          height: 4.88rem;
          opacity: 1;
          box-sizing: border-box;
          border: 0.01rem solid #e8e8e8;
          .toptitle {
            width: calc(100%-0.23rem);
            height: 0.42rem;
            background: #f5f7f9;
            font-family: PingFang SC;
            font-size: 0.12rem;
            padding-left: 0.13rem;
            line-height: 0.42rem;
            font-weight: 500;
          }
          .middleimg {
            position: absolute;
            top: 1rem;
            left: 0.4rem;
            border: 0.02rem dashed #666666;
          }
          .bottomtitle {
            font-family: PingFang SC;
            font-size: 0.14rem;
            color: #666666;
            margin-top: 3.32rem;
            margin-left: 0.84rem;
          }
        }
        .right {
          display: flex;
          flex-direction: column;
        }
        .right > div {
          width: 9.84rem;
          height: 0.79rem;
          border: 0.01rem solid #e8e8e8;
          margin-left: 0.2rem;
          margin-bottom: 0.2rem;
          padding: 0.13rem 0 0.28rem 0.16rem;
        }
      }
    }
  }
  .bottom {
    font-family: PingFang SC;
    font-size: 0.16rem;
    color: #000000;
    font-weight: bold;
    border: 0.01rem solid #e8e8e8;
    padding: 0.2rem;
    margin-top: 0.2rem;
    margin-bottom: 0.8rem;
    .textBox {
      font-size: 0.12rem;
      font-size: 500;
      margin-top: 0.2rem;
      .huiText {
        color: #999999;
      }
    }
  }
  .buttombuttons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    position: fixed;
    bottom: 0;
    padding: 0.1rem 0;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    left: 1.62rem;
    .gray {
      color: #000000;
      background: #f5f7f9;
    }
    .red {
      margin-left: 0.52rem;
      background: #e22a1f;
      color: #ffffff;
    }
  }
  .buttombuttons div {
    cursor: pointer;
    width: 1.2rem;
    height: 0.41rem;
    border-radius: 0.04rem;
    font-family: PingFang SC;
    font-size: 0.14rem;
    line-height: 0.41rem;

    text-align: center;
  }
}
</style>
